<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../wowjs文档/css/libs/animate.css" />
    <script src="../wowjs代码/wow.min.repeat.js"></script>
    <script src="js/wow.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .flex-center-center{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .container {
        width: 80%;
     
        margin: 0 auto;
        border: 1px solid black;
      }
      .container .title-box {
        text-transform: uppercase;
        width: 20%;
        display: flex;
        justify-content: space-between;
      }
       a:hover {
        color: lightgreen;
      }
      a{
        color: #1daee9;
        display: inline-block;
        text-decoration: none;
      }
      .container .title-box a {
        margin: 20px auto;
        color: gray;
        display: block;
        text-decoration: none;
      }
      img {
        display: block;
        width: 100%;
      }
      .text {
        padding-top: 24px;
        margin: 0 0 0 0;
        display: inline-block;
        font-size: 18px;
        line-height: 28px;
        font-weight: bold;
      }
      .circle-box{
         display: flex;
         padding:0 50px ;
         flex-wrap: wrap;
         justify-content: space-evenly;
      }
      .circle {
        margin: 25px 10px;
        width: 200px;
        color: #fff;
        font-size: 32px;
        line-height: 200px;
        text-align: center;
        height: 200px;
        border-radius: 100px;
        background-color: lightgreen;
       
      }
      h3 {
    padding-top: 24px;
    margin: 0;
    display: inline-block;
    font-size: 18px;
    line-height: 28px;
}
.box{
    display: flex;
    justify-content: space-between;
}
.item-box{
    width: 45%;
    border: 1px solid #1daee9;
    color: #1daee9;
    text-align: center;
}
.item-box:hover{
    color: #5bd5a0;
    border: 1px solid #5bd5a0;
}
.item-box:hover .footer{
background-color: #5bd5a0 !important;
}
.item-box2{
    width: 45%;
    border: 1px solid #eb3980;
    color: #eb3980;
    text-align: center;
}
.item-box2:hover{
    color: #5bd5a0;
    border: 1px solid #5bd5a0;
}
.item-box2:hover .footer2{
background-color: #5bd5a0 !important;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="title-box wow fadeInDown" data-wow-delay="0.5s">
        <a href="#">how to use</a>
        <a href="#">github</a>
      </div>
      <div class="content" style="width: 940px; margin: 0 auto">
        <div class="logo wow pulse" data-wow-duration="0.15s" data-wow-iteration="3">
          <img src="./img/wow-logo.jpg" alt="" />
        </div>
        <div class="text">
          Reveal Animations When You Scroll. Very Animate.css Friend :-) Easily
          customize animation settings: style, delay, length, offset,
          iterations... 100% MIT Licensed, not GPL. Keep your code yours.
          ES2015+, naturally Caffeine free.
        </div>
        <div class="circle-box">
           <div class="circle wow rollIn">SUCH EASY</div> 
           <div class="circle wow bounceInDown" style="background-color: white;"><img src="./img/wow-1.gif" alt=""></div> 
           <div class="circle wow lightSpeedIn" style="background-color: #ffcc35;">VERY ES</div> 
           <div class="circle wow rollIn" style="background-color: white;"><img src="./img/wow-3.gif" alt=""></div> 
           <div class="circle wow pulse" data-wow-iteration="5" data-wow-duration="0.15s" style="background-color: #1daee9;">WOW</div> 
           <div class="circle wow bounceInRight" style="background-color: white;"><img src="./img/wow-12.gif" alt=""></div> 
           <div class="circle wow bounceInLeft" style="background-color: #eb3980">NO jQuery</div> 
           <div class="circle wow flipInX" style="background-color: white;"><img src="./img/wow-2.gif" alt=""></div> 
           <div class="circle wow bounceInRight" style="background-color: #c843a5;">many anims</div> 
           <div class="circle wow rollIn" style="background-color: white;"><img src="./img/wow-5.gif" alt=""></div> 
           <div class="circle wow shake" data-wow-iteration="5" data-wow-duration="0.15s" style="background-color: #ffcc35;">aint GPL</div> 
           <div class="circle wow swing" data-wow-iteration="2" style="background-color: white;"><img src="./img/wow-6.gif" alt=""></div> 
           <div class="circle wow rollIn" style="background-color: #c843a5;">How small</div> 
           <div class="circle wow bounceInUp" data-wow-delay="0.5s" style="background-color: white;"><img src="./img/wow-10.gif" alt=""></div> 
           <div class="circle wow lightSpeedIn" style="background-color: #5bd5a0;" data-wow-delay="0.5s" data-wow-duration="0.15s">3 KiB only</div> 
           <div class="circle wow rollIn" style="background-color: white;"><img src="./img/wow-7.gif" alt=""></div> 
           <div class="circle wow pulse" style="background-color: lightblue;">just scroll</div> 
           <div class="circle wow lightSpeedIn" style="background-color: white;"><img src="./img/wow-9.gif" alt=""></div> 
           <div class="circle wow bounce" style="background-color: #ffcc35;">reveal now</div> 
           <div class="circle wow bounceInUp" style="background-color: white;"><img src="./img/wow-8.gif" alt=""></div> 
           <div class="circle wow bounceInRight" style="background-color: #eb3980;">so impress</div> 
           <div class="circle wow rollIn" style="background-color: white;">
            <img src="./img/wow-4.gif" alt="">
           </div> 
           <div class="circle wow filp" style="background-color: #5bd5a0;" data-wow-iteration="5"
           data-wow-duration="0.15s">
            WOW
           </div> 
           <div class="circlewow bounceInRight" style="background-color: white;"><img src="./img/wow-11.gif" alt=""></div> 
           <div class="circle wow rollIn" style="background-color: #eb3980;"> no jquery</div> 
           <div class="circle wow bounceInDown" data-wow-delay="1s" style="background-color: white;"><img src="./img/grumpy.gif" alt=""></div> 
           <div class="circle wow bounceInRight" style="background-color: #c843a5;">that sucks</div> 
          
        </div>
        <h3 style="width: 940px; text-align: center; font-weight: bold; margin-top: 20px;">Licensed under the <a href="#">MIT License</a>:</h3>

        <div class="wow pulse flex-center-center" data-wow-delay="300ms" data-wow-iteration="infinite" data-wow-duration="2s" >
            <a href="#">
              <img src="img/mit.svg"  alt="MIT License" class="center" height="414" width="414">
            </a>
          </div>
          <p style="text-align: center; font-weight: bold;margin-top: 40px; margin-bottom: 20px;">See wow.js revealing animations on these websites:</p>
          <p style="text-align: center;"><a href="#">* Aerolab *</a></p>
          <p style="text-align: center;"><a href="#">* Streamline Icons *</a></p>
          <p style="text-align: center;"><a href="#">* Box Notes *</a></p>
          <p style="text-align: center;"><a href="#">* Rock Band 4 *</a></p>
          <p style="text-align: center; font-weight: bold; margin-top: 20px;margin-bottom: 20px;">Free to use and modify wow.js under the MIT License:</p>
          <p style="text-align: center;">If you want to use wow.js to develop commercial sites, themes, projects, and applications you are 100% free to do so! Your source code is kept proprietary. Just remember to include the entire contents of <a href="#">The MIT Licenses</a> in your product.</p>
        
         <div class="box">
              <div class="item-box">
                <p style="margin-top: 20px;">wow.js MIT</p>
                <p style="font-weight: bold; font-size: 20px;">Free</p>
                <p>License</p>
                <p style="font-weight: bold; font-size: 24px;margin-bottom: 20px;margin-top: 20px;">for ∞ project</p>
                <p 
                class="footer"
                style="background-color: #1daee9;color: white;">FREE</p>
              </div>
              <div class="item-box2">
                <p style="margin-top: 20px;">wow.js MIT</p>
                <p style="font-weight: bold; font-size: 20px;">Free</p>
                <p>License</p>
                <p style="font-weight: bold; font-size: 24px;margin-bottom: 20px;margin-top: 20px;">for ∞ project</p>
                <p 
                class="footer2"
                style="background-color: #eb3980;color: white;">FREE</p>
              </div>
         </div>
         <p style="text-align: center; margin-top: 20px; font-weight: bold;">Checkout my other projects!</p>
         <p style="text-align: center;"><a href="">* SQLAlchemy Redshift *</a></p>
         <p style="text-align: center;"><a href="">* SlimerJS NPM bundler *</a></p>
         <p style="text-align: center;margin-top: 20px; font-weight: bold;">Installing wow.js takes only seconds: <a>Read the documentation</a></p>
         <p style="text-align: center;">Developed by <a>Matt Aussaguel</a> – Forked to remain under the MIT license by <a>Thomas Grainger</a> – Initiated & Designed by Webalys</p>
         <p style="text-align: center;">IContributed by <a>Attila Oláh</a></p>
         <p style="text-align: center;margin-bottom: 200px;">CSS animations powered by <a>wow.js</a> and <a>Animate.css</a></p>

      </div>
    </div>
  </body>
  <script>
    new WOW().init();
  </script>
</html>
